h1 {
    width: 100%;
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}

main {
    height: 100%;
    width: 100%;
    background-image: url(../../assets/imgs/划船.jpg);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 63%;
    padding-top: 30px;
    div {
        position: absolute;
        right: 20px;
        border-radius: 20px;
        background-color: #fff;
        height: 40px;
        width: 100px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        .number {
            border-right: 1px solid #000;
            padding-right: 10px;
        }
        .text{
            padding-left: 5px;
            background-color: #fff;
            font-weight: bold;
        }
    }
    h2 {
        position: absolute;
        bottom: 150px;
        font-size: 50px;
        color: #fff;
        text-align: center;
        width: 100%;
    }

    .slide-in-elliptic-top-fwd {
        -webkit-animation: slide-in-elliptic-top-fwd 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s alternate backwards;
        animation: slide-in-elliptic-top-fwd 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s alternate backwards;
    }
    @-webkit-keyframes slide-in-elliptic-top-fwd {
        0% {
            -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
            -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
            opacity: 1;
        }
    }

    @keyframes slide-in-elliptic-top-fwd {
        0% {
            -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
            -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
            opacity: 1;
        }
    }
}